<template>
  <div class="calendarpie" id="calendarpie"   :style="{width: '700px', height: '500px'}"></div>
</template>

<script>
export default {
  name: "CalendarPie",
  data(){
    return{
      // 整张表的长宽
      cellSize : [90, 65],
      // 表里饼图的大小
      pieRadius : 30,
      //每天的数据
      incomclass : [],
      colorList:[],
    }
  },
  methods: {
    getVirtulData (startdate,enddate) {
      let date = +this.$echarts.number.parseDate(startdate);
      let end = +this.$echarts.number.parseDate(enddate);
      let dayTime = 3600 * 24 * 1000;
      let data = [];
      for (let time = date; time < end; time += dayTime) {
        data.push([
          this.$echarts.format.formatTime('yyyy-MM-dd', time),
        ]);
      }
      return data;
    },
    getPieSeries(scatterData, chart) {
      var i = 0;
      const _this = this
      return scatterData.map(function (item, index) {
        var center = chart.convertToPixel('calendar', item);
        var pieData = _this.incomclass[i];
        i = i+ 1;
        return {
          id: index + 'pie',
          type: 'pie',
          center: center,
          // 饼图里面数据显示方式
          label: {
            formatter: '{c}',
            position: 'inside',
            fontSize:8
          },
          // 饼图显示格式
          radius: _this.pieRadius,
          data:pieData,
          itemStyle: {
            normal: {
              color: function(params) {
                //自定义饼图颜色
                var colorList = _this.colorList;
                return colorList[params.dataIndex]
              }
            }
          }
        };
      });
    },
    getPieSeriesUpdate(scatterData, chart) {
      return scatterData.map(function (item, index) {
        var center = chart.convertToPixel('calendar', item);
        return {
          id: index + 'pie',
          center: center
        };
      });
    },
    getCurrentMonthFirst(){
      var date = new Date();
      date.setDate(1);
      var month = parseInt(date.getMonth()+1);
      var day = date.getDate();
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      return date.getFullYear() + '-' + month + '-' + day;
    },
    getNextMonthFirst(){
      var date=new Date();
      var currentMonth=date.getMonth();
      var nextMonth=++currentMonth;
      var nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1);
      var month = parseInt(nextMonthFirstDay.getMonth()+1);
      var day = nextMonthFirstDay.getDate();
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      return date.getFullYear() + '-' + month + '-' + day;
    }
  },
  mounted() {
    const _this = this
    axios.get(this.$base_url+'sys/webinfo').then(res => {
      for (let item of res.data.data) {
        if (item.isshow==1){
          switch (item.id){
            case 4:
              _this.colorList.push("#EE6867")
              break;
            case 3:
              _this.colorList.push("#F9C759")
              break;
            case 2:
              _this.colorList.push("#94CC75")
              break;
            case 1:
              _this.colorList.push("#5973C4")
              break;
          }
        }
      }
    })

    axios.get(this.$base_url+'piechart/calendarpie').then(function (response) {
      _this.incomclass = response.data.data
      let myChart = _this.$echarts.init(document.getElementById('calendarpie'))
      var startdate = _this.getCurrentMonthFirst()
      var enddate = _this.getNextMonthFirst()
      var scatterData = _this.getVirtulData(startdate,enddate)
      myChart.setOption({
        backgroundColor:'#FFFFFF',//背景颜色白色
        // 移到饼图显示信息
        tooltip : {
          trigger: 'item',
          formatter: "{b} : {c} ({d}%)"
        },
        calendar: {
          top: 'middle',
          left: 'center',
          orient: 'vertical',
          cellSize: _this.cellSize,
          // 年份是否显示
          yearLabel: {
            show: false,
            fontSize: 30
          },
          // 星期显示顺序
          dayLabel: {
            margin: 20,
            // 星期开始为周日
            firstDay: 1,
            nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
          },
          monthLabel: {
            show: false
          },
          // 日期框子表格生成，按输入的月份
          // 可以生成相应的天数的格子数量
          range: [startdate,enddate]
        },
        series: [
          {
            id: 'label',
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 0,
            //让移动到日期不显示信息
            tooltip : {
              trigger: 'item',
              formatter: "{b}"
            },
            label: {
              show: true,
              //具体日期
              formatter: function (params) {
                return _this.$echarts.format.formatTime('dd', params.value[0]);
              },
              // 日期位置
              offset: [-_this.cellSize[0] / 2 + 10, -_this.cellSize[1] / 2 + 10],
              // 日期大小
              fontSize: 14
            },
            // 该月份的天数
            data: scatterData,

          }
        ]
      });
      let pieInitialized;
      setTimeout(function () {
        pieInitialized = true;
        //饼图相关
        myChart.setOption({
          series: _this.getPieSeries(scatterData, myChart)
        });

        // 饼图过了多少ms出现
      }, 50);

      app.onresize = function () {
        if (pieInitialized) {
          myChart.setOption({
            series: _this.getPieSeriesUpdate(scatterData, myChart)
          });
        }
      };
    })
  },

}
</script>

<style scoped>
.calendarpie{
  margin-top: 40px;
}
.calendarpie:hover {
  -webkit-box-shadow: #ccc 0px 10px 10px;
  -moz-box-shadow: #ccc 0px 10px 10px;
  box-shadow: #ccc 0px 10px 10px;
}
</style>